<script setup lang="ts">
import router from '@/router'
import type { Equipment } from '@/types/EquipmentType'
import { reactive, ref } from 'vue'
import { useSEquipmentstore } from '@/stores/INeedEquipmentStore'
import { api } from '@/api/api'
import { ElLoading, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'

const equipmentStore = useSEquipmentstore()
const form = ref<Equipment>({
  equipNo: '',
  name: '',
  level: '',
  scope: '',
  addYear: 0,
  traceMethod: '',
  validDate: '',
  source: ''
})
const formdata = equipmentStore.equipment
form.value = equipmentStore.equipment

form.value.id = formdata.id

function goBack() {
  router.go(-1)
}

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl
    .validate((valid) => {
      if (valid) {
        let loading = ElLoading.service()
        if (!form.value.equipNo) form.value.equipNo = formdata.equipNo
        if (!form.value.addYear) form.value.addYear = formdata.addYear
        if (!form.value.level) form.value.level = formdata.level
        if (!form.value.name) form.value.name = formdata.name
        if (!form.value.scope) form.value.scope = formdata.scope
        if (!form.value.source) form.value.source = formdata.source
        if (!form.value.traceMethod) form.value.traceMethod = formdata.traceMethod
        if (!form.value.validDate) form.value.validDate = formdata.validDate
        api
          .addEquipment(form.value)
          .then(() => {
            loading.close()
            ElMessageBox.alert('修改成功', '成功', {
              confirmButtonText: '确认'
            }).then(() => {
              router.go(-1)
            })
          })
          .catch(() => {
            loading.close()
            ElMessageBox.alert('修改失败', '错误', {
              confirmButtonText: '确认'
            })
          })
      } else {
        ElMessageBox.alert('设备信息填写出错', '错误', {
          confirmButtonText: '确认'
        })
      }
    })
    .catch(() => {
      ElMessageBox.alert('修改失败', '错误', {
        confirmButtonText: '确认'
      })
    })
}

const FormRef = ref<FormInstance>()
const rules = reactive<FormRules<Equipment>>({
  equipNo: [{ required: true, message: '请输入设备仪器编号', trigger: 'blur' }],
  name: [{ required: true, message: '请输入设备仪器名称', trigger: 'blur' }],
  level: [{ required: true, message: '请输入型号/规格/等级', trigger: 'blur' }],
  scope: [{ required: true, message: '请输入测量范围', trigger: 'blur' }],
  addYear: [{ required: true, message: '请输入设备购买年份', trigger: 'blur' }],
  traceMethod: [{ required: true, message: '请输入溯源方式', trigger: 'blur' }],
  validDate: [{ message: '请输入有效截止日期', trigger: 'blur' }],
  source: [{ required: true, message: '请输入设备来源', trigger: 'blur' }]
})
</script>

<template>
  <div class="main">
    <div class="sub">
      <el-button type="primary" @click="goBack()">返回上一页</el-button>
    </div>
    <el-form :model="form" :rules="rules" ref="FormRef" label-width="120px">
      <el-form-item label="设备仪器编号">
        <el-input v-model="form.equipNo" :placeholder="formdata.equipNo" />
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="form.name" :placeholder="formdata.name" />
      </el-form-item>
      <el-form-item label="型号/规格/等级">
        <el-input v-model="form.level" :placeholder="formdata.level" />
      </el-form-item>
      <el-form-item label="测量范围">
        <el-input v-model="form.scope" :placeholder="formdata.scope" />
      </el-form-item>
      <el-form-item label="设备购买年份">
        <el-input v-model="form.addYear" :placeholder="formdata.addYear" />
      </el-form-item>
      <el-form-item label="溯源方式">
        <el-input v-model="form.traceMethod" :placeholder="formdata.traceMethod" />
      </el-form-item>
      <el-form-item label="有效截止日期至">
        <el-input v-model="form.validDate" :placeholder="formdata.validDate" />
      </el-form-item>
      <el-form-item label="设备来源">
        <el-input v-model="form.source" :placeholder="formdata.source" />
      </el-form-item>
    </el-form>
    <div>
      <el-button type="primary" @click="submitForm(FormRef)">提交更改</el-button>
    </div>
  </div>
</template>

<style scoped>
.main {
  margin-top: 100px;
}

.el-input {
  max-width: max(30vw, 200px);
  min-width: 200px;
}
</style>
